'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import {connect} from 'react-redux'
import Util from '../../../../core/utils/util';
import GridView from '../../../../core/component/comp.grid-view';
import WinPanel from "../../../../core/component/comp.win-panel";
import PeopleInfoItem from "../../../../core/component-biz/comp.people-info-panel";
import NavBar from '../../../../core/component-biz/comp.index.nav-search-bar';
import Color from '../../../../core/constant/color';
import {userActions} from '../../../../actions/index'
import ImageButton from "../../../../core/component/comp.image-button";
import FooterLine from "../../../../core/component/comp.footer-line";
import UserSkillItem from "../../../../core/component-biz/comp.user-skill-item";

class MainScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "主页",
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        const {dispatch} = this.props;
    }

    onPressJumpToType = (type) => {
        Util.showToast("跳转到全部愿望")
    }

    genPeopleInfoListUI(bannerInfo) {
        const items = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
                passVideo: true,
                shortDesc: '做最好的自己，永远🌺年轻🌺~~',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: true,
                shortDesc: '自信的人，永远最美，👍👍👍加油⛽️️⛽️️⛽️️',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: false,
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: false,
            }
        ];
        return (
            <View>
                <View style={styles.bannerView}>
                    <Image style={styles.bannerImage} source={bannerInfo.url}/>
                </View>
                <GridView removeClippedSubviews={false} pageSize={5} initialListSize={5}
                          groupStyle={styles.gridViewGrop}
                          items={items} itemsPerRow={2}
                          renderItem={this.genPeopleInfoItemUI}/>
            </View>
        )
    }


    onPressJumpToDetail(userInfo) {
        const {navigate} = this.props.navigation;
        navigate('YuanwangDetail', {title: userInfo.nickName, userInfo: userInfo});
    }


    genPeopleInfoItemUI = (item, index) => {
        return <PeopleInfoItem key={`people-info-item-${index}`} item={item}
                               onPress={this.onPressJumpToDetail.bind(this, item)}/>
    }

    genGamePanelUI() {
        const infoList = [];
        return (
            <WinPanel title='LOL陪玩' iconSource={require('../../../../img/icon_small_info.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "LOL陪玩")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_lol.png')})}
            </WinPanel>
        );
    }

    genGame2PanelUI() {
        const infoList = [];
        return (
            <WinPanel title='荣耀陪玩' iconSource={require('../../../../img/icon_small_info.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "荣耀陪玩")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_rongyao.png')})}
            </WinPanel>
        );
    }

    genOnlineChatPanelUI() {
        return (
            <WinPanel title='甜美声优' iconSource={require('../../../../img/icon_small_love.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "甜美声优")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_voice.png')})}
            </WinPanel>
        );
    }

    genShoppingPanelUI() {
        return (
            <WinPanel title='准时叫醒' iconSource={require('../../../../img/icon_small_wish.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "准时叫醒")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_voice.png')})}
            </WinPanel>
        );
    }

    genEatingPanelUI() {
        return (
            <WinPanel title='寻觅美食' iconSource={require('../../../../img/icon_small_photo.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "寻觅美食")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_rongyao.png')})}
            </WinPanel>
        );
    }

    genRelationShipPanelUI() {
        return (
            <WinPanel title='客户关系' iconSource={require('../../../../img/icon_small_wish.png')}
                      onPressTitleBar={this.onPressJumpToType.bind(this, "客户关系")}>
                {this.genPeopleInfoListUI({url: require('../../../../img/icon_banner_game_more.png')})}
            </WinPanel>
        );
    }

    render2() {
        return (
            <View style={styles.container}>
                <NavBar readOnly={true} onRightPress={this.onPressJumpToPage.bind(this, 'MainSearchScene')}
                        onSearchInputPress={this.onPressJumpToPage.bind(this, 'MainSearchScene')}/>
                <ScrollView style={styles.scrollView}>
                    {this.genGamePanelUI()}
                    {this.genGame2PanelUI()}
                    {this.genOnlineChatPanelUI()}
                    {this.genShoppingPanelUI()}
                    {this.genEatingPanelUI()}
                    {this.genRelationShipPanelUI()}
                </ScrollView>
            </View>
        )
    }


    genBannerUI() {
        return (
            <View style={styles.bannerAd}>
                <Image style={styles.bannerAdImage} source={require('../../images/home/banner.png')}/>
            </View>
        );
    }

    onPressJumpToPage(pageName, cfg = {}) {
        const {navigate} = this.props.navigation;
        navigate(pageName, cfg);
    }

    genQuickMenuUI() {
        return (
            <View style={styles.quickMenu}>
                <View style={styles.row}>
                    <TouchableOpacity style={styles.imageYueLiaoTouch}
                                      onPress={this.onPressJumpToPage.bind(this, "MainYaoYueGuangChangScene")}>
                        <ImageBackground style={styles.imageYueLiao} source={require('../../images/home/home_button_bg.png')}>
                            <Image style={styles.imageYueLiaoBtn} source={require('../../images/home/home_button.png')}/>
                        </ImageBackground>
                    </TouchableOpacity>
                </View>
                <View style={styles.row}>
                    <TouchableOpacity style={styles.imageGameTouch}
                                      onPress={this.onPressJumpToPage.bind(this, "MainCommonScrollTabViewScene", {
                                          title: "游戏陪玩",
                                          tabs: [{name: '王者荣耀'}, {name: '绝地求生'},]
                                      })}>
                        <ImageBackground style={styles.imageGame} source={require('../../images/home/home_img_game.png')}>
                            <Image style={styles.imageIcon} source={require('../../images/home/wangzhe_ico.png')}/>
                            <Text style={styles.quickBtnTitle}>游戏陪玩</Text>
                        </ImageBackground>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.imageChatTouch}
                                      onPress={this.onPressJumpToPage.bind(this, "MainCommonScrollTabViewScene", {
                                          title: "线上聊天",
                                          tabs: [{name: '声优聊天'}, {name: '叫醒服务'},]
                                      })}>
                        <ImageBackground style={styles.imageChat} source={require('../../images/home/home_img_chat.png')}>
                            <Image style={styles.imageIcon} source={require('../../images/home/home_huatong.png')}/>
                            <Text style={styles.quickBtnTitle}>线上聊天</Text>
                        </ImageBackground>
                    </TouchableOpacity>

                </View>
                <View style={styles.row}>
                    <TouchableOpacity style={styles.imageChatTouch}
                                      onPress={this.onPressJumpToPage.bind(this, "MainCommonScrollTabViewScene", {
                                          title: "线下见面",
                                          tabs: [{name: '逛街'}, {name: '美食'}, {name: '观影'}, {name: '公关'}, {name: '按摩'},]
                                      })}>
                        <ImageBackground style={styles.imageMeet} source={require('../../images/home/home_img_meet.png')}>
                            <Image style={styles.imageIcon} source={require('../../images/home/home_huatongxing.png')}/>
                            <Text style={styles.quickBtnTitle}>线下见面</Text>
                        </ImageBackground>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.imageChatTouch}
                                      onPress={this.onPressJumpToPage.bind(this, "MainCommonScrollTabViewScene", {
                                          title: "邀约广场",
                                          tabs: [{name: '声优聊天'}, {name: '叫醒服务'},]
                                      })}>
                        <ImageBackground style={styles.imageGuangChang}
                               source={require('../../images/home/home_img_guangchang.png')}>
                            <Image style={styles.imageIcon} source={require('../../images/home/home_gaungchang_ico.png')}/>
                            <Text style={styles.quickBtnTitle}>邀约广场</Text>
                        </ImageBackground>
                    </TouchableOpacity>


                </View>
            </View>
        );
    }


    genGuessYouLikeListUI() {
        const list = [
            {
                "id": 1,
                "person_id": 17,
                "price": 20,
                "skillDesc": "擅长中下，全时间段接单",
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "wangzherongyao_zizhi_template",
                "emp_id": 17,
                "nick_name": "小铃铛",
                "grade_id": 433,
                "skill_id": 16,
                "orderNumber": 11,
                "evaluateNumber": 5,
                "orderNumber30": 10,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "systemDesc": "QQ区 强势核心 全区有号",
                "unit": "半小时",
                "zizhitu_url": "wangzherongyao_zizhi_template@/media/235.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银大叔",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 1
            },
            {
                "id": 2,
                "person_id": 17,
                "price": 10,
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "jiaoxing_zizhi_template",
                "emp_id": 17,
                "skill_id": 22,
                "nick_name": "花仙子",
                "orderNumber": 2,
                "evaluateNumber": 1,
                "orderNumber30": 1,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "unit": "次",
                "zizhitu_url": "jiaoxing_zizhi_template@/media/236.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银月套餐",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 2
            }
        ];

        return (<View>
            {
                list.map((item, index) => {
                    return (<UserSkillItem key={`user-skill-item-${index}`} item={item}
                                           onPress={this.onPressJumpToSkillDetail.bind(this, item)}/>);
                })
            }
        </View>)
    }

    onPressJumpToSkillDetail(skillInfo) {
        this.props.navigation.navigate('SkillDetailScene',{title:skillInfo.skill_name,skillInfo:skillInfo})
    }

    render() {
        return (
            <View style={styles.container}>
                <NavBar readOnly={true} onRightPress={this.onPressJumpToPage.bind(this, "MainSearchScene")}
                        onSearchInputPress={this.onPressJumpToPage.bind(this, "MainSearchScene")}/>
                <ScrollView style={styles.scrollView}>
                    {this.genBannerUI()}
                    {this.genQuickMenuUI()}
                    <FooterLine title="猜你喜欢" style={styles.footerLine}/>
                    {this.genGuessYouLikeListUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    scrollView: {},
    bannerAd: {},
    bannerAdImage: {
        width: '100%',
        height: 175,
    },
    bannerView: {
        flexDirection: 'row',
        padding: 8,
    },
    bannerImage: {
        flex: 1,
        height: 200,
        // resizeMode:'contain',
        backgroundColor: 'blue',
        borderRadius: 6,
    },
    bigHeaderPanel: {},
    bigHeaderImage: {
        height: 255,
        resizeMode: 'cover',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnPassVideo: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        width: 140,
        position: 'absolute',
        left: 8,
        top: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    btnPassVideoIcon: {
        width: 22,
        height: 22,
    },
    btnPassVideoText: {
        color: '#0ABB07',
    },
    playBtn: {
        width: 65,
        height: 65,
    },
    playBtnImage: {
        width: 65,
        height: 65,
    },
    userDetailPanel: {
        backgroundColor: 'white',
    },
    userDetailTop: {
        padding: 8,
        flexDirection: 'row',
        alignItems: 'center',
        // borderWidth:1,
    },
    userNickName: {
        fontSize: 14,
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        height: 18,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginLeft: 8,

    },
    age: {
        color: '#FF0055',
        fontSize: 12,
    },
    genderIcon: {
        width: 12,
        height: 12,
    },
    rightActivePanel: {
        flex: 1,
        alignItems: 'flex-end',

    },
    btnActiveTime: {
        width: 78,
        height: 30,
        backgroundColor: '#FF0055',
    },
    btnActiveTimeText: {
        color: 'white',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        marginLeft: 8,
    },
    userDetailBottom: {
        padding: 8,
    },
    userDetailShortDesc: {
        color: '#707070',
        fontSize: 14,
    },

    gridViewGrop: {
        justifyContent: 'space-between',
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },

    row: {
        flexDirection: 'row',
    },
    imageYueLiaoTouch: {
        flex: 1,
        flexDirection: 'row',
    },
    imageYueLiao: {
        flex: 1,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10,
        marginBottom: 10,
        alignItems: 'flex-end',
        justifyContent: 'center',
        height:63,
    },
    imageYueLiaoBtn: {
        width: 55,
        height: 54,
        marginRight: 10,
    },
    quickMenu: {
        alignItems: 'center',
    },
    imageIcon: {},
    quickBtnTitle: {
        backgroundColor: 'transparent',
        color: 'white',
        fontSize: 14,
        marginTop: 5,
    },
    imageGameTouch: {
        flex: 1,
        flexDirection: 'row',
    },
    imageGame: {
        flex: 1,
        marginLeft: 10,
        marginRight: 5,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        height:87,
        borderRadius:5,
        overflow:'hidden',
    },


    imageChatTouch: {
        flex: 1,
        flexDirection: 'row',
    },
    imageChat: {
        flex: 1,
        marginLeft: 5,
        marginRight: 10,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        height:87,
        borderRadius:5,
        overflow:'hidden',
    },

    imageMeetTouch: {
        flex: 1,
        flexDirection: 'row',
    },
    imageMeet: {
        flex: 1,
        marginLeft: 10,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center',
        height:87,
        borderRadius:5,
        overflow:'hidden',
    },

    imageGuangChangTouch: {
        flex: 1,
        flexDirection: 'row',
    },
    imageGuangChang: {
        flex: 1,
        marginLeft: 5,
        marginRight: 10,
        alignItems: 'center',
        justifyContent: 'center',
        height:87,
        borderRadius:5,
        overflow:'hidden',
    },
    footerLine: {
        marginTop: 10,
        marginBottom: 10,
    }
});

export default connect((state, props) => {
    return ({});
})(MainScene);